<script lang="ts" setup>
import { ref, computed,watch } from 'vue'
import {
  onPageScroll,
  onReady,
  onShareAppMessage,
  onLoad,
  onShow,
} from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { useSubPage } from './composables'
import TnUpdateUserInfoPopup from 'tnuiv3p-tn-update-user-info-popup/index.vue'
import storageApi from '@/utils/storage'
import { useUserStore } from '@/stores'
import { updateUser, getAccount } from '@/services/api'
const userStore = useUserStore()
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  handleRenew,
  navbarInitFinishHandle,
  navTextBookPage,
} = useSubPage()
const userInfoObj = ref()
const userBaseInfo = ref({})
const showUpdateUserInfoPopup = ref<boolean>(false)
const avatarUrl = ref<string>(
  'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
)
const userNickName = ref<string>('')
const username = ref<string>('')
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
onShareAppMessage((e) => {
  return {
    title: '语境佳',
    path: '/pages/my/index',
  }
})

onReady(() => {})
onPageScroll((e) => {})
onLoad(() => {
  getUserInfo()
})
onShow(() => {
  // getUserInfo()
})
// 监听是否绑定设备
watch(()=> userStore.getUserInfoObj,(val)=>{
	getUserInfo()
})
const jumpPage = (type, mode) => {
	switch (type) {
		case 1:
			tnNavPage(`/home-page/temp/video-center?mode=${mode}`)
			break
		case 2:
			tnNavPage(`/home-page/temp/audio-list`)
			break
	}
}

//获取用户信息
const getUserInfo = () => {
	userInfoObj.value = userStore.getUserInfoObj
	avatarUrl.value = userStore.getAvatarUrl && userStore.getAvatarUrl !='' ? userStore.getAvatarUrl :   'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
	userInfoObj.value.avatar = userStore.getAvatarUrl && userStore.getAvatarUrl !='' ? userStore.getAvatarUrl :   'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
	userNickName.value = userStore.getUserNickName
	userInfoObj.value.username = userStore.getUserNickName
	username.value = userStore.getUserNickName
}

const openUpdateUserInfoPopup = () => {
  showUpdateUserInfoPopup.value = true
  userInfoObj.value.avatar = userStore.getAvatarUrl
  userInfoObj.value.username = userStore.getUserNickName		
}

const toActivePage = async () => {
  userStore.toScanMate()
}

// 修改用户头像
const onChooseAvatar = (filePath: string) => {
  uni.uploadFile({
    url: 'https://hr.xming-ai.com/xm/platform/file_upload',
    filePath: filePath,
    name: 'file',
    success: (res) => {
      let data = JSON.parse(res.data)
      if (data.code === 0) {
		userInfoObj.value.avatar = data.data.file_url
      }
    },
  })
}

//更新用户信息
const onUpdateUser = () => {
  let { name, id } = userInfoObj.value.data
  let wechat = name.split('wechat-')
  updateUser({
    owner: 'built-in',
    name: name,
    id: id,
    externalId: '',
    type: 'normal-user',
    displayName: userInfoObj.value.username,
    avatar: userInfoObj.value.avatar,
    wechat: wechat[1],
  }).then((res) => {
	username.value = userInfoObj.value.username
	avatarUrl.value = userInfoObj.value.avatar
    userStore.getUserInfo()
  })
}
</script>

<template>
  <!-- 顶部背景 -->
  <TnNavbar
    fixed
    home-icon=""
    home-text=""
    back-icon=" "
    back-text=" "
    bg-color="transparent"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
    style="display: flex; align-items: center"
  >
    <view class="tn-color-black"  style="font-size: 34rpx;">个人中心</view>
  </TnNavbar>
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <!-- 用户信息 -->
    <view
      class="user-info"
      v-if="userStore.ifBindSn"
    >
      <view class="info-content">
        <!-- <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="avatarUrl" mode="aspectFill" />
        </button> -->
        <button class="avatar-wrapper" @tap.stop="openUpdateUserInfoPopup">
          <image class="avatar" :src="avatarUrl" mode="aspectFill" />
        </button>
        <view class="content">
          <view class="font-size-16 username" v-if="username ">{{
            username
          }}</view>
          <!-- <view class="nickname font-color-c191919 font-size-16">{{
            userStore.snDetail?.BindingSN[0]
          }}</view> -->
          <view class="text tn-text-md date mt-4" style="color: #00b069 !important"
            >设备已激活</view
          >
          <view class="uid">
            <view class="text tn-text-md date"
              >激活日期: {{ userStore.snDetail?.ActivationTime[0] }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="text-center" v-else>
      <view class="login-btn tn-shadow" @tap.stop="toActivePage">
        <view class="font-size-16 font-color-white text">激活设备</view>
      </view>
      <view class="font-color-c999 font-size-12 mt-8 text-center"
        >您的设备未激活，请激活您的设备</view
      >
    </view>
    <!-- 分类 -->
  <!--  <view
      class="tn-flex tn-flex-row-between tn-flex-col-center"
      style="margin-top: 62rpx"
    >
      <view class="vip-bar" @click="handleRenew">
        <view class="time-box">
          <view class="time">2024-09-21 09:31:23</view>
          <view class="btn">去续费</view>
        </view>
        <image src="@/static/imgs/icons/vip1.png" mode="aspectFit"></image>
      </view>
      <view class="vip-bar" @click="handleRenew" >
        <view class="time-box-two">
          <view class="time">2024-09-21 09:31:23</view>
          <view class="btn">去续费</view>
        </view>
        <image src="@/static/imgs/icons/vip2.png" mode="aspectFit"></image>
      </view>
    </view> -->
<!--    <view class="list" style="padding: 6rpx 48rpx">
      <view class="list-item" @click="navTextBookPage">
        <view class="left">
          <view class="icon">
            <image
              src="@/static/imgs/icons/my_icon_one.png"
              mode="widthFix"
              class="my-icons"
            ></image>
          </view>
          <view class="text" style="color: #000">教材设置</view>
        </view>
      </view>
    </view> -->
    <!-- 列表 -->
    <view class="list">
	  <TnButton only-button @click="tnNavPage('/home-page/setting/index')">
	    <view class="list-item">
	      <view class="left">
	        <view class="icon">
	          <image
	            src="@/static/imgs/icons/my_icon_four.png"
	            mode="widthFix"
	            class="my-icons"
	          ></image>
	        </view>
	        <view class="text"> 使用指南 </view>
	      </view>
	      <view class="right">
	        <view class="icon">
	          <TnIcon name="right" />
	        </view>
	      </view>
	    </view>
	  </TnButton>
	  <TnButton only-button @click="tnNavPage('/home-page/clause/index')">
	    <view class="list-item">
	      <view class="left">
	        <view class="icon">
	          <image
	            src="@/static/imgs/icons/my_icon_one.png"
	            mode="widthFix"
	            class="my-icons"
	          ></image>
	        </view>
	        <view class="text"> 服务条款 </view>
	      </view>
	      <view class="right">
	        <view class="icon">
	          <TnIcon name="right" />
	        </view>
	      </view>
	    </view>
	  </TnButton>
	  <TnButton only-button @click="tnNavPage('/home-page/agreement/index')">
	    <view class="list-item">
	      <view class="left">
	        <view class="icon">
	          <image
	            src="@/static/imgs/icons/my_icon_three.png"
	            mode="widthFix"
	            class="my-icons"
	          ></image>
	        </view>
	        <view class="text"> 隐私协议 </view>
	      </view>
	      <view class="right">
	        <view class="icon">
	          <TnIcon name="right" />
	        </view>
	      </view>
	    </view>
	  </TnButton>
      <TnButton only-button @click="tnNavPage('/home-page/feedback/index')">
        <view class="list-item">
          <view class="left">
            <view class="icon">
              <image
                src="@/static/imgs/icons/my_icon_four.png"
                mode="widthFix"
                class="my-icons"
              ></image>
            </view>
            <view class="text"> 意见反馈 </view>
          </view>
          <view class="right">
            <view class="icon">
              <TnIcon name="right" />
            </view>
          </view>
        </view>
      </TnButton>
      <TnButton only-button @click="tnNavPage('/home-page/set/index')">
        <view class="list-item">
          <view class="left">
            <view class="icon">
              <image
                src="@/static/imgs/icons/my_icon_five.png"
                mode="widthFix"
                class="my-icons"
              ></image>
            </view>
            <view class="text"> 设置 </view>
          </view>
          <view class="right">
            <view class="icon">
              <TnIcon name="right" />
            </view>
          </view>
        </view>
      </TnButton>
    </view>
  </view>
  <TnUpdateUserInfoPopup
  v-if="showUpdateUserInfoPopup"
    v-model:show="showUpdateUserInfoPopup"
    v-model:avatar="userInfoObj.avatar"
    v-model:nickname="userInfoObj.username"
    @choose-avatar="onChooseAvatar"
    @confirm="onUpdateUser"
    confirm-bg-color="#4b49e8"
    confirm-text="保存"
  />
</template>

<style lang="scss" scoped>
@import './styles/index.scss';

:deep(.tn-navbar-back__text) {
  display: none !important;
}

.tn-navbar-back__text {
  display: none !important;
}
</style>
